<template>
  <div class="car-page">
      <select-location/>
      <div class="car-warp">
        <header class="car-header-bar">
          <h2><input type="checkbox" :value="item.id" :checked="item.active=='1'" />多点超市</h2>
        </header>
        <div class="car-product-list">
            <ul>
              <li v-for="item in carList" :key="item.id">
                <dl>
                  <dt>
                    <input type="checkbox"/>
                    <div class="info">
                      <h2>{{item.name}}</h2>
                      <p>{{item.price}}</p>
                    </div>
                  </dt>
                  <dd>
                    <md-number v-model="item.num" @input="(val)=>editNum(num,item)" />
                  </dd>
                </dl>
              </li>
            </ul>
        </div>
        <footer class="car-foot-bar">
          <dl>
            <dt>
              <h3>合计:</h3>
              <p>促销以抵扣金额: ¥0.00</p>
            </dt>
            <dd>
              <md-button class="pay-btn" type="primary" :round="false">选好了</md-button>
            </dd>
          </dl>
        </footer>
      </div>
  </div>
</template>

<script>
import SelectLocation from './components/SelectLocation'
import {mapState} from 'vuex'
export default {
  name:'Car',
  components:{
      SelectLocation
  },
  computed: {
    ...mapState('car',['carList']),
    isCheckAll(){
      const selectNum=this.carList.filter((item)=>{
        return selectNum===this.carList.length
      })
      },
      price(){
        let price = 0
        this.carList.forEach((item)=>{
          if(item.active==='1'){
            price+=item.price
          }
        })
      return price
    }
  },
  methods: {
    checkAll(e){
      const active =parseInt(item.active)===1?'1':'0'
     this.$store.dispath('car/update',{
       id:item.id,
       active
    })
   },
    updateActive(item){
      const active =parseInt(item.active)===1?'0':'1'
     this.$store.dispath('car/update',{
       id:item.id,
       active
    })
   },
   editNum(num,item){
     this.$store.dispath('car/update',{
       id:item.id,
       num
     })
   }
  },
}
</script>

<style lang='scss' scoped>
  .car-page{
    @include wh(100vw,100vh);
    background: #F8F8F8;
    padding-bottom: 96px;
    .car-warp{
      margin-top: 40px;
      font-size: $font-size-m;
        .car-header-bar{
          background: #fff;
            @include wh(100%,88px);
            @include border1px(bottom);
            @include flex(row,flex-start,center);
        }
        .car-product-list{
          flex: 1;
          overflow: auto;
        }
        .car-footer-bar{
          @include wh(100vw,auto);
          position: fixed;
          bottom: 96px;
          background: #fff;
          dl{
            flex: 1;
            h3{
              font-size: $font-size-l;
              color: $base-color;
            }
            p{
              line-height: 2;
              color: #ccc;
            }
          }
        }
    }
  }
</style>